<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>岗位管理 - SimpleHire</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .job-card {
            transition: transform 0.2s, box-shadow 0.2s;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 10px;
        }
        .job-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
        .stats-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
        }
        .action-buttons .btn {
            margin: 0.125rem;
        }
        .filter-section {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: #6c757d;
        }
        .table-responsive {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="bi bi-briefcase-fill me-2"></i>SimpleHire
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume/analysis">简历分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/interview">AI面试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/job-matching">岗位匹配</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown" sec:authorize="isAuthenticated()">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>
                            <span sec:authentication="name">用户</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><a class="dropdown-item active" href="/job-matching/manage">岗位管理</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="display-6 mb-2">
                            <i class="bi bi-gear me-3"></i>岗位管理
                        </h1>
                        <p class="lead text-muted mb-0">管理您发布的岗位信息</p>
                    </div>
                    <div>
                        <a href="/job-matching/create" class="btn btn-primary btn-lg">
                            <i class="bi bi-plus-circle me-2"></i>发布新岗位
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计信息 -->
        <div class="row mb-4" th:if="${stats}">
            <div class="col-12">
                <div class="stats-card p-4">
                    <div class="row text-center">
                        <div class="col-md-3">
                            <h3 class="mb-1" th:text="${stats.totalJobs}">0</h3>
                            <small>总发布岗位</small>
                        </div>
                        <div class="col-md-3">
                            <h3 class="mb-1" th:text="${stats.activeJobs}">0</h3>
                            <small>活跃岗位</small>
                        </div>
                        <div class="col-md-3">
                            <h3 class="mb-1" th:text="${stats.totalMatches}">0</h3>
                            <small>总匹配次数</small>
                        </div>
                        <div class="col-md-3">
                            <h3 class="mb-1" th:text="${stats.avgMatchScore}">0</h3>
                            <small>平均匹配分数</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-section">
            <h5 class="mb-3"><i class="bi bi-funnel me-2"></i>筛选岗位</h5>
            <form th:action="@{/job-matching/manage}" method="get">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="title" class="form-label">岗位标题</label>
                        <input type="text" class="form-control" id="title" name="title" 
                               th:value="${searchTitle}" placeholder="搜索岗位标题">
                    </div>
                    <div class="col-md-3">
                        <label for="status" class="form-label">状态</label>
                        <select class="form-select" id="status" name="status">
                            <option value="">全部状态</option>
                            <option value="ACTIVE" th:selected="${searchStatus == 'ACTIVE'}">活跃</option>
                            <option value="INACTIVE" th:selected="${searchStatus == 'INACTIVE'}">暂停</option>
                            <option value="CLOSED" th:selected="${searchStatus == 'CLOSED'}">关闭</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="industry" class="form-label">行业</label>
                        <select class="form-select" id="industry" name="industry">
                            <option value="">全部行业</option>
                            <option th:each="industry : ${industries}" 
                                    th:value="${industry}" 
                                    th:text="${industry}"
                                    th:selected="${industry == searchIndustry}"></option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-search me-1"></i>搜索
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 消息提示 -->
        <div th:if="${success}" class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>
            <span th:text="${success}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        
        <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>
            <span th:text="${error}"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>

        <!-- 岗位列表 -->
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">
                        <i class="bi bi-list me-2"></i>我的岗位
                        <span class="badge bg-secondary ms-2" th:text="${#lists.size(jobs)}">0</span>
                    </h5>
                    <div class="btn-group" role="group">
                        <input type="radio" class="btn-check" name="viewMode" id="cardView" checked>
                        <label class="btn btn-outline-secondary" for="cardView">
                            <i class="bi bi-grid"></i>
                        </label>
                        <input type="radio" class="btn-check" name="viewMode" id="tableView">
                        <label class="btn btn-outline-secondary" for="tableView">
                            <i class="bi bi-list"></i>
                        </label>
                    </div>
                </div>

                <!-- 空状态 -->
                <div th:if="${#lists.isEmpty(jobs)}" class="empty-state">
                    <i class="bi bi-inbox display-1"></i>
                    <h5 class="mt-3">暂无岗位信息</h5>
                    <p>您还没有发布任何岗位，点击上方按钮开始发布您的第一个岗位吧！</p>
                    <a href="/job-matching/create" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-2"></i>发布岗位
                    </a>
                </div>

                <!-- 卡片视图 -->
                <div id="cardViewContent" th:unless="${#lists.isEmpty(jobs)}">
                    <div class="row">
                        <div th:each="job : ${jobs}" class="col-lg-6 col-xl-4 mb-4">
                            <div class="card job-card h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h5 class="card-title mb-0" th:text="${job.title}">岗位标题</h5>
                                        <span class="badge status-badge" 
                                              th:classappend="${job.status == 'ACTIVE' ? 'bg-success' : (job.status == 'INACTIVE' ? 'bg-warning' : 'bg-secondary')}"
                                              th:text="${job.status == 'ACTIVE' ? '活跃' : (job.status == 'INACTIVE' ? '暂停' : '关闭')}">状态</span>
                                    </div>
                                    <h6 class="card-subtitle mb-2 text-muted" th:text="${job.companyName}">公司名称</h6>
                                    <p class="card-text text-muted" th:text="${#strings.abbreviate(job.description, 80)}">岗位描述...</p>
                                    
                                    <div class="row text-center mb-3">
                                        <div class="col-4">
                                            <small class="text-muted">浏览量</small><br>
                                            <strong th:text="${job.viewCount ?: 0}">0</strong>
                                        </div>
                                        <div class="col-4">
                                            <small class="text-muted">匹配次数</small><br>
                                            <strong th:text="${job.matchCount ?: 0}">0</strong>
                                        </div>
                                        <div class="col-4">
                                            <small class="text-muted">平均分数</small><br>
                                            <strong th:text="${job.avgMatchScore ? #numbers.formatDecimal(job.avgMatchScore, 1, 1) : '0.0'}">0.0</strong>
                                        </div>
                                    </div>
                                    
                                    <div class="text-muted small mb-3">
                                        <i class="bi bi-calendar me-1"></i>
                                        发布：<span th:text="${#temporals.format(job.createdAt, 'MM-dd HH:mm')}">时间</span>
                                        <span class="ms-3">
                                            <i class="bi bi-arrow-repeat me-1"></i>
                                            更新：<span th:text="${#temporals.format(job.updatedAt, 'MM-dd HH:mm')}">时间</span>
                                        </span>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent">
                                    <div class="action-buttons d-flex flex-wrap justify-content-center">
                                        <a th:href="@{/job-matching/job/{id}(id=${job.id})}" 
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye me-1"></i>查看
                                        </a>
                                        <a th:href="@{/job-matching/edit/{id}(id=${job.id})}" 
                                           class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-pencil me-1"></i>编辑
                                        </a>
                                        <button th:if="${job.status == 'ACTIVE'}" 
                                                class="btn btn-sm btn-outline-warning"
                                                onclick="toggleJobStatus([[${job.id}]], 'INACTIVE')">
                                            <i class="bi bi-pause me-1"></i>暂停
                                        </button>
                                        <button th:if="${job.status == 'INACTIVE'}" 
                                                class="btn btn-sm btn-outline-success"
                                                onclick="toggleJobStatus([[${job.id}]], 'ACTIVE')">
                                            <i class="bi bi-play me-1"></i>激活
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger"
                                                onclick="deleteJob([[${job.id}]], '[[${job.title}]]')">
                                            <i class="bi bi-trash me-1"></i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 表格视图 -->
                <div id="tableViewContent" style="display: none;" th:unless="${#lists.isEmpty(jobs)}">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>岗位信息</th>
                                    <th>状态</th>
                                    <th>统计</th>
                                    <th>时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="job : ${jobs}">
                                    <td>
                                        <div class="fw-bold" th:text="${job.title}">岗位标题</div>
                                        <div class="text-muted small" th:text="${job.companyName}">公司名称</div>
                                        <div class="text-muted small" th:if="${job.workLocation}" th:text="${job.workLocation}">工作地点</div>
                                    </td>
                                    <td>
                                        <span class="badge" 
                                              th:classappend="${job.status == 'ACTIVE' ? 'bg-success' : (job.status == 'INACTIVE' ? 'bg-warning' : 'bg-secondary')}"
                                              th:text="${job.status == 'ACTIVE' ? '活跃' : (job.status == 'INACTIVE' ? '暂停' : '关闭')}">状态</span>
                                    </td>
                                    <td>
                                        <small>
                                            浏览：<span th:text="${job.viewCount ?: 0}">0</span><br>
                                            匹配：<span th:text="${job.matchCount ?: 0}">0</span><br>
                                            平均分：<span th:text="${job.avgMatchScore ? #numbers.formatDecimal(job.avgMatchScore, 1, 1) : '0.0'}">0.0</span>
                                        </small>
                                    </td>
                                    <td>
                                        <small>
                                            发布：<span th:text="${#temporals.format(job.createdAt, 'MM-dd')}">时间</span><br>
                                            更新：<span th:text="${#temporals.format(job.updatedAt, 'MM-dd')}">时间</span>
                                        </small>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a th:href="@{/job-matching/job/{id}(id=${job.id})}" 
                                               class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <a th:href="@{/job-matching/edit/{id}(id=${job.id})}" 
                                               class="btn btn-sm btn-outline-secondary">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                            <div class="btn-group" role="group">
                                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                                        data-bs-toggle="dropdown"></button>
                                                <ul class="dropdown-menu">
                                                    <li th:if="${job.status == 'ACTIVE'}">
                                                        <a class="dropdown-item" href="#" 
                                                           onclick="toggleJobStatus([[${job.id}]], 'INACTIVE')">
                                                            <i class="bi bi-pause me-2"></i>暂停岗位
                                                        </a>
                                                    </li>
                                                    <li th:if="${job.status == 'INACTIVE'}">
                                                        <a class="dropdown-item" href="#" 
                                                           onclick="toggleJobStatus([[${job.id}]], 'ACTIVE')">
                                                            <i class="bi bi-play me-2"></i>激活岗位
                                                        </a>
                                                    </li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <a class="dropdown-item text-danger" href="#" 
                                                           onclick="deleteJob([[${job.id}]], '[[${job.title}]]')">
                                                            <i class="bi bi-trash me-2"></i>删除岗位
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-exclamation-triangle text-danger me-2"></i>确认删除
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除岗位 <strong id="deleteJobTitle"></strong> 吗？</p>
                    <p class="text-muted small">此操作不可撤销，相关的匹配记录也将被删除。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JS -->
    <script>
        // 视图切换
        document.querySelectorAll('input[name="viewMode"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const cardView = document.getElementById('cardViewContent');
                const tableView = document.getElementById('tableViewContent');
                
                if (this.id === 'cardView') {
                    cardView.style.display = 'block';
                    tableView.style.display = 'none';
                } else {
                    cardView.style.display = 'none';
                    tableView.style.display = 'block';
                }
            });
        });

        // 切换岗位状态
        function toggleJobStatus(jobId, newStatus) {
            if (confirm('确定要' + (newStatus === 'ACTIVE' ? '激活' : '暂停') + '这个岗位吗？')) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/job-matching/toggle-status';
                
                const jobIdInput = document.createElement('input');
                jobIdInput.type = 'hidden';
                jobIdInput.name = 'jobId';
                jobIdInput.value = jobId;
                
                const statusInput = document.createElement('input');
                statusInput.type = 'hidden';
                statusInput.name = 'status';
                statusInput.value = newStatus;
                
                form.appendChild(jobIdInput);
                form.appendChild(statusInput);
                document.body.appendChild(form);
                form.submit();
            }
        }

        // 删除岗位
        let deleteJobId = null;
        
        function deleteJob(jobId, jobTitle) {
            deleteJobId = jobId;
            document.getElementById('deleteJobTitle').textContent = jobTitle;
            new bootstrap.Modal(document.getElementById('deleteModal')).show();
        }
        
        document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
            if (deleteJobId) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/job-matching/delete';
                
                const jobIdInput = document.createElement('input');
                jobIdInput.type = 'hidden';
                jobIdInput.name = 'jobId';
                jobIdInput.value = deleteJobId;
                
                form.appendChild(jobIdInput);
                document.body.appendChild(form);
                form.submit();
            }
        });
    </script>
</body>
</html>